<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>修改基本信息</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="showPwdContainer"
        >
          修改密码
        </el-button>
      </div>
      <div>
        <el-form
          ref="ruleForm"
          class="demo-ruleForm"
          label-width="100px"
          :model="form"
          :rules="rules"
        >
          <el-form-item label="用户名" prop="name">
            <el-input v-model="form.name" placeholder="用户名" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="手机号" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="邮箱" />
          </el-form-item>
          <el-form-item label="头像">
            <ImgUpload
              :image-url="imgUrl"
              name="user"
              @beforeUpload="beforeUpload"
              @onSuccess="onSuccess"
            />
          </el-form-item>
          <el-form-item label="备注说明" prop="descri">
            <el-input
              v-model="form.descri"
              placeholder="请输入备注说明"
              rows="4"
              type="textarea"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit('ruleForm')">
              提交
            </el-button>
            <el-button @click="handleReset('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <pwd ref="pwd" />
  </div>
</template>

<script>
  import Pwd from './components/pwd'
  import ImgUpload from '@/components/ImgUpload'
  import { getUserInfo, updateOne } from '@/api/user'
  export default {
    components: { Pwd, ImgUpload },
    props: {},
    data() {
      return {
        dialogVisible: false,
        form: { name: '', phone: '', email: '', descri: '' },
        rules: {
          name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        },
      }
    },
    computed: {
      imgUrl() {
        if (this.form.avatar) {
          let prefix = ''
          if (!/http:\/\/|https:\/\//.test(this.form.avatar)) {
            prefix = `http://api.zesi.com.cn`
          }
          return prefix + this.form.avatar
        }
        return ''
      },
    },
    watch: {},
    created() {
      this.getUserInfo()
    },
    mounted() {},
    methods: {
      async getUserInfo() {
        const {
          data: { userinfo },
        } = await getUserInfo()
        this.form = userinfo
      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isLt2M) {
          this.$message({
            message: '上传图片大小不能超过 2MB!',
            type: 'error',
            showClose: true,
          })
        }
        return isJPG && isLt2M
      },
      onSuccess(data) {
        this.form.avatar = data.imgUrl
      },
      handleSubmit() {
        const fields = ['name', 'email', 'phone', 'avatar', 'descri']
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            let postData = {}
            fields.forEach((item) => {
              postData[item] = this.form[item]
            })
            postData.avatar = this.imgUrl
            const { msg } = await updateOne(postData, this.form.id)

            this.$baseMessage(msg, 'success', 'vab-hey-message-success')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      handleReset() {
        this.form = { name: '', phone: '', email: '', descri: '' }
      },
      showPwdContainer() {
        this.$refs.pwd.show(this.form.id)
      },
    },
  }
</script>
<style lang="scss" scoped></style>
